<template>
  <div class="Homepage">
     <div class="mint-header">
      <!-- <mt-button
        icon="back"
        class="headerback"
        v-touch:left="back"
      ></mt-button> -->
      <h1 class="headercenter">内场驾驶证初次申办</h1>
    </div>

    <div class="main">
      <ul class="tab">
        <li 
        v-for="(item,index) in tabs" 
        :key="index"
        :class="{tabActive:index === thisIndex}"
        @click="hadleSwitch(index)" >{{item.title}}</li>
      </ul>
      <!-- 申请信息 -->
      <div v-show="thisIndex === 0" class="userInfo">
        <div class="clearfix">
          <div class="fl">
            <p>驾驶员姓名：张三</p>
            <p>性别：男</p>
            <p>单位：昆明机场</p>
          </div>
          <div class="fr">
            <img class="userImg" src="/static/img/timg.5823f0f.jpg" alt="">
          </div>
        </div>
        <p>国籍：中国</p>
        <p>出生日期：1987-02-12</p>
        <p>社会机动车驾驶证号：430423198702120322</p>
        <p>控制区通行证号：42132</p>
        <p>准驾车型：A1</p>
        <p>是否有妨碍驾驶疾病及生理缺陷：否</p>
        <p>手机号码：13510942371</p>
        <p>社会机动车初次领证日期：2007-09-12</p>
      </div>
      <!-- 其他信息 -->
      <div v-show="thisIndex === 1" class="other">
        此处显示PC端前置流程节点生成的“业务申请类型”中的
        信息、前置流程上传的图片、前置流程生成的表单
      </div>
       <!-- 审批处理 -->
      <div>
        <a class="approvalBtn" href="javascript:;">审批处理</a>
      </div>
      <textarea v-model="textareaTxt" name="" class="opinion" id="" cols="20" rows="2"  placeholder="请输入您的审批意见"></textarea>
      <div style="text-align:right;">
        {{txtLength}}/100
      </div>
      <div class="res">
        审批结果：
        <el-radio v-model="radio" label="1">同意</el-radio>
        <el-radio v-model="radio" label="2">不同意</el-radio>
      </div>

    <div class="footer-btn">
      <a href="javascript:;">返回</a>
      <a href="javascript:;">提交</a>
    </div>
   
   
    </div>

    

    
   



    <home-footer ref="mychild"></home-footer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Swiper from "swiper";
import HomeFooter from "../Footer";
export default { 
  name: "HelloWorld",
  data() {
    return {
      selected: "",
      //常用应用
      PersonnelFilesData: [
        {
          id: "1",
          to: "www.baidu.com",
          name: "车辆档案"
        },
        {
          id: "2",
          to: "www.baidu.com",
          name: "驾驶员档案"
        },
        {
          id: "3",
          to: "www.baidu.com",
          name: "人员违规登记"
        },
        {
          id: "4",
          to: "www.baidu.com",
          name: "设备违规登记"
        },
        {
          id: "5",
          to: "www.baidu.com",
          name: "无动力设备档案"
        },
        {
          id: "6",
          to: "www.baidu.com",
          name: "外来物损伤"
        },
        {
          id: "7",
          to: "www.baidu.com",
          name: "知识抽查"
        },
        {
          id: "8",
          to: "www.baidu.com",
          name: "统计分析"
        }
      ],
      dataCount: this.$store.state.userInfo1, //用data接收,
      tabs: [
        {title: '申请信息'},
        {title: '其他信息'}
      ],
      thisIndex: 0,
      radio: '1',
      textareaTxt: '',
      txtLength:0,
    };
  },
  components: {
    HomeFooter
  },
  created() {},
  computed: {
    ...mapState(["userInfo1"])
  },
  mounted() {
    console.log(this.userInfo1);
    this.$refs.mychild.FooterUlliData("1");
  },
  watch: {
    textareaTxt(val) {
      this.txtLength = val.length;
      if (val.length > 100) {
        this.textareaTxt = val.substring(0,100);
      }
    }
  },
  methods: {
    hadleSwitch(index) {
      this.thisIndex = index;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.main {
  padding: 10px 20 / 100rem 50px 20 / 100rem;
  text-align: left;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  display: block;
  width: 0;
  height: 0;
  line-height: 0;
  content: '';
  clear: both;
  visibility: hidden;
}
.tab {
  display: flex;
  flex-direction: row;
  li {
    border: 1px solid #00be9f;
    border-radius: 2px;
    text-align: center;
    margin-right: 10 / 100rem;
    padding: 3 / 100rem 10 /100rem;
    font-size: 16 / 100rem;
  }
}
.tabActive {
  color: #fff;
  background: #00be9f;
}
.userInfo {
  text-align: left;
  padding: 10px 0;
  .userImg {
    width: 120 / 100rem;
    height: 120 / 100rem;
    border-radius: 50%;
    margin-right: 20 / 100rem;
  }
  p {
    line-height: 22px;
  }
}
.other {
  padding: 10px 0;
}
.approvalBtn {
    display: inlen-block;
    border: 1px solid #00be9f;
    background: #00be9f;
    border-radius: 2px;
    text-align: center;
    
    padding: 3 / 100rem 10 /100rem;
    font-size: 16 / 100rem;
    color: #fff;
}
.opinion {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  
}
.res {
  label {
    &:nth-child(1) {
      margin-left: 32px / 100rem;
    }
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #00be9f !important;
    background: #00be9f !important;
  }
  .el-radio__input.is-checked+.el-radio__label {
      color: #00be9f !important;
  }
}
.footer-btn {
  a {
    display: inline-block;
    text-align: center;
    margin: 10px;
    padding: 10px 50px;
    border: 1px solid #00be9f;
    border-radius: 2px;
    color: #00be9f;
    &:nth-child(1) {
      margin-right: 20px;
    }
    &:nth-child(2) {
      background: #00be9f;
      color: #fff;
    }
    &:active {
      opacity: 0.8;
    }
  }
}

</style>
